<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人像美容 - Beauty App</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="beauty_theme.css">
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
    <style>
        /* 页面基础样式 */
        .app-container {
            max-width: 375px;
            margin: 0 auto;
            background: 
                radial-gradient(circle at 20% 80%, rgba(120, 80, 60, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(160, 100, 70, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(100, 60, 40, 0.2) 0%, transparent 50%),
                linear-gradient(135deg, #2D1B0E 0%, #1A0E08 40%, #0F0704 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 顶部导航栏样式 */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(25px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: sticky;
            top: 0;
            z-index: 100;
            height: 56px;
        }
        
        .back-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            border-radius: 50%;
        }
        
        .back-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .back-btn:active {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(0.95);
        }
        
        .edit-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            border-radius: 50%;
        }
        
        .edit-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .edit-btn:active {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(0.95);
        }
        
        /* Tab组件样式 */
        .tab-wrapper {
            flex: 1;
            margin: 0 12px;
            overflow: hidden;
        }
        
        .tab-container {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            padding: 4px;
            background: transparent;
        }
        
        .tab-container::-webkit-scrollbar {
            display: none;
        }
        
        .tab-item {
            flex-shrink: 0;
            padding: 8px 16px;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            user-select: none;
            white-space: nowrap;
            position: relative;
        }
        
        .tab-item .tab-text {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            transition: color 0.2s ease;
        }
        
        .tab-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #FF6B35, transparent);
            transform: translateX(-50%);
            transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        
        .tab-item.active::after {
            width: 80%;
        }
        
        .tab-item.active .tab-text {
            color: white;
            font-weight: 600;
        }
        
        .tab-item:hover .tab-text {
            color: rgba(255, 255, 255, 0.9);
        }
        
        /* 扇形轮播样式 */
        .carousel-section {
            padding: 24px 0;
            height: 400px;
            overflow: hidden; /* 确保左右图片被裁切 */
        }
        
        .fan-carousel {
            position: relative;
            height: 100%;
            width: 100%;
        }
        
        .carousel-track {
            position: relative;
            height: 320px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform-origin: center center;
        }
        
        .carousel-track.dragging {
            transition: none;
        }
        
        .carousel-item {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 280px;
            margin-top: -140px;
            margin-left: -100px;
            transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            transform-origin: center center; /* 以图片中心为变换原点 */
        }
        
        /* 扇形特殊状态样式 */
        .carousel-item.fan-active .image-wrapper {
            border: 3px solid var(--primary);
            box-shadow: 0 8px 25px 0 hsl(0 0% 0% / 0.15), 
                        0 0 0 1px var(--primary),
                        0 0 15px 0 hsl(var(--primary) / 0.3);
        }
        
        .carousel-item.fan-side .image-wrapper {
            border-color: var(--carousel-border);
            box-shadow: 0 6px 20px 0 hsl(0 0% 0% / 0.08);
        }
        
        .carousel-item.fan-far .image-wrapper {
            border-color: var(--carousel-border);
            box-shadow: 0 4px 15px 0 hsl(0 0% 0% / 0.06);
        }
        
        .carousel-item.fan-hidden {
            pointer-events: none;
        }
        
        .image-wrapper {
            width: 100%;
            height: 100%;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--carousel-shadow);
            border: 2px solid var(--carousel-border);
            position: relative;
            background: #f0f0f0;
        }
        
        .image-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(transparent, rgba(0,0,0,0.15));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.4s ease;
        }
        
        .carousel-item.fan-active .image-wrapper img {
            filter: brightness(1) saturate(1.1) contrast(1.05);
        }
        
        .carousel-item.fan-side .image-wrapper img {
            filter: brightness(0.95) saturate(1.0);
        }
        
        .carousel-item.fan-far .image-wrapper img {
            filter: brightness(0.9) saturate(0.95);
        }
        
        .carousel-item.fan-hidden .image-wrapper img {
            filter: brightness(0.8) saturate(0.9);
        }
        
        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
        }
        
        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--muted);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .indicator.active {
            background: var(--primary);
            transform: scale(1.2);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1.2); }
            50% { opacity: 0.6; transform: scale(1.4); }
        }
        
        /* 功能区域样式 */
        .function-section {
            padding: 24px 16px 24px;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(25px) saturate(180%);
            border-radius: 24px 24px 0 0;
            margin-top: -24px;
            position: relative;
            z-index: 10;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: none;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.95);
            text-align: center;
            margin-bottom: 24px;
            padding-top: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
        
        .section-title::before,
        .section-title::after {
            content: '';
            width: 60px;
            height: 1px;
            background: linear-gradient(to var(--gradient-dir), 
                transparent 0%, 
                rgba(255, 107, 53, 0.6) 50%, 
                rgba(255, 107, 53, 0.3) 100%);
        }
        
        .section-title::before {
            --gradient-dir: right;
        }
        
        .section-title::after {
            --gradient-dir: left;
        }
        
        .price-options {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .price-option {
            padding: 14px 24px;
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            position: relative;
            overflow: hidden;
        }
        
        .price-option::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .price-option:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }
        
        .price-option:hover::before {
            opacity: 1;
        }
        
        .price-option.active {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 1.5px solid rgba(255, 255, 255, 0.25);
            transform: scale(1.01);
            box-shadow: 
                0 3px 12px rgba(255, 255, 255, 0.08),
                0 1px 4px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .price-option.active::before {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
            opacity: 1;
        }
        
        .price-option .currency {
            font-size: 13px;
            font-weight: 400;
            opacity: 0.9;
        }
        
        .price-option .amount {
            font-size: 16px;
            font-weight: 600;
            margin: 0 1px;
        }
        
        .price-option .suffix {
            font-size: 13px;
            font-weight: 400;
            opacity: 0.9;
        }
        
        .main-action {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
            color: white;
            border: none;
            border-radius: 26px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 6px 20px rgba(255, 107, 53, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .main-action:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 8px 25px rgba(255, 107, 53, 0.5),
                0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .main-action:active {
            transform: scale(0.98);
        }
        
        .main-action::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .main-action:active::before {
            width: 300px;
            height: 300px;
        }
        
        .terms-container {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 8px;
            width: 100%;
            text-align: center;
        }
        
        .checkbox-wrapper {
            margin-top: 2px;
            flex-shrink: 0;
        }
        
        .terms-checkbox {
            display: none;
        }
        
        .checkbox-label {
            display: block;
            width: 16px;
            height: 16px;
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .checkbox-label::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            background: #FF6B35;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.2s ease;
        }
        
        .terms-checkbox:checked + .checkbox-label::after {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .checkbox-label:hover {
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.1);
        }
        
        .terms-text {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.4;
            margin: 0;
            cursor: pointer;
            user-select: none;
        }
        
        .terms-clickable {
            cursor: pointer;
        }
        
        .terms-link {
            color: #FF6B35;
            text-decoration: none;
            cursor: pointer;
        }
        
        .terms-link:hover {
            text-decoration: underline;
            color: #FF8855;
        }
        
        /* 页面加载动画 */
        .app-container {
            animation: slideInUp 0.5s ease-out;
        }
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .carousel-section {
            animation: fadeIn 0.6s ease-out 0.1s both;
        }
        
        .function-section {
            animation: fadeIn 0.6s ease-out 0.2s both;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 响应式调整 */
        @media (max-width: 320px) {
            .carousel-item {
                width: 200px;
                margin-left: -100px;
            }
            
            .price-options {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <button class="back-btn" aria-label="返回">
                <i data-lucide="chevron-left" size="20"></i>
            </button>
            
            <div class="tab-wrapper">
                <div id="tabContainer"></div>
            </div>
            
            <button class="edit-btn" aria-label="编辑">
                <i data-lucide="edit-3" size="16"></i>
            </button>
        </header>
        
        <!-- 主要轮播区域 -->
        <section class="carousel-section">
            <div id="fanCarousel"></div>
        </section>
        
        <!-- 功能选择区域 -->
        <section class="function-section">
            <h2 class="section-title">高级修</h2>
            
            <div class="price-options">
                <div class="price-option" data-price="5">
                    <span class="currency">¥</span><span class="amount">5</span><span class="suffix">起</span>
                </div>
                <div class="price-option active" data-price="15">
                    <span class="currency">¥</span><span class="amount">15</span><span class="suffix">起</span>
                </div>
                <div class="price-option" data-price="30">
                    <span class="currency">¥</span><span class="amount">30</span><span class="suffix">起</span>
                </div>
            </div>
            
            <button class="main-action">
                <i data-lucide="sparkles" size="18" style="margin-right: 8px; display: inline-block; vertical-align: middle;"></i>
                帮我修图
            </button>
            
            <div class="terms-container">
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="terms-checkbox" class="terms-checkbox" checked>
                    <label for="terms-checkbox" class="checkbox-label"></label>
                </div>
                <label for="terms-checkbox" class="terms-text">
                    <span class="terms-clickable">点击即表示同意</span><a href="#" class="terms-link" onclick="event.stopPropagation();">服务条款</a><span class="terms-clickable">和</span><a href="#" class="terms-link" onclick="event.stopPropagation();">隐私政策</a><br>
                    <span class="terms-clickable">我们严格保护您的隐私安全</span>
                </label>
            </div>
        </section>
    </div>
    
    <script src="tab-component.js"></script>
    <script src="fan-carousel.js"></script>
    <script>
        // 初始化图标
        lucide.createIcons();
        
        // Tab数据
        const tabData = [
            { text: '人像美容' },
            { text: '改字抠图' },
            { text: '证件照' }
        ];
        
        // 轮播图数据
        const carouselImages = [
            {
                src: 'https://plus.unsplash.com/premium_photo-1667520524170-f7f44b5b0376?w=400&h=600&fit=crop&crop=face',
                alt: '美容效果1'
            },
            {
                src: 'https://images.unsplash.com/photo-1589722078371-403f758b8451?w=400&h=600&fit=crop&crop=face',
                alt: '美容效果2'
            },
            {
                src: 'https://images.unsplash.com/photo-1633307558033-bc7e7c44e49a?w=400&h=600&fit=crop&crop=face',
                alt: '美容效果3'
            },
            {
                src: 'https://images.unsplash.com/photo-1676083140049-c106e01c754c?w=400&h=600&fit=crop&crop=face',
                alt: '美容效果4'
            },
            {
                src: 'https://images.unsplash.com/photo-1702355864646-8dec92a4c48d?w=400&h=600&fit=crop&crop=face',
                alt: '美容效果5'
            },
            {
                src: 'https://images.unsplash.com/photo-1633307558231-746795df5b0a?w=400&h=600&fit=crop&crop=face',
                alt: '美容效果6'
            }
        ];
        
        // 初始化Tab组件
        const tabContainer = document.getElementById('tabContainer');
        const tabComponent = new TabComponent(tabContainer, {
            tabs: tabData,
            activeIndex: 0,
            onTabChange: (index, tab) => {
                console.log('Tab changed:', index, tab);
            }
        });
        
        // 初始化扇形轮播
        const carouselContainer = document.getElementById('fanCarousel');
        const fanCarousel = new FanCarousel(carouselContainer, {
            images: carouselImages,
            currentIndex: 0,
            autoPlay: true,
            autoPlayInterval: 8000,
            onSlideChange: (index, image) => {
                console.log('Slide changed:', index, image);
            }
        });
        
        // 价格选项交互
        const priceOptions = document.querySelectorAll('.price-option');
        priceOptions.forEach(option => {
            option.addEventListener('click', () => {
                priceOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
            });
        });
        
        // 主要操作按钮
        const mainActionBtn = document.querySelector('.main-action');
        mainActionBtn.addEventListener('click', () => {
            const activePrice = document.querySelector('.price-option.active').dataset.price;
            alert(`开始处理图片，价格: ¥${activePrice}起`);
        });
        
        // 返回按钮
        const backBtn = document.querySelector('.back-btn');
        backBtn.addEventListener('click', () => {
            history.back();
        });
        
        // 编辑按钮
        const editBtn = document.querySelector('.edit-btn');
        editBtn.addEventListener('click', () => {
            alert('进入编辑模式');
        });
    </script>
</body>
</html>